<template>
  <div class="my-info">
    <div class="list">
      <router-link to="/profile/create" class="create" active-class="increate">
        我创建的歌单
        <span v-show="$store.state.userInfo">{{$store.state.createListInfo.length}}</span>
      </router-link>
      <router-link to="/profile/collect" class="collect" active-class="incollect">
        我收藏的歌单
        <span v-show="$store.state.userInfo">{{$store.state.collectListInfo.length}}</span>
      </router-link>
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
  </div>
</template>

<script>
    export default {
        name: "MyInfo"
    }
</script>

<style scoped>
  .my-info{
    position: relative;
  }

  .list{
    padding-left: 15px;
    position: absolute;
    top: 210px;
    width: 100%;
  }

  .create{
    font-size: 12px;
    margin-right: 20px;
    color: darkgrey;
  }

  .collect{
    font-size: 12px;
    color: darkgrey;
  }

  .increate{
    font-weight: bolder;
    color: #666;
    font-size: 14px;
  }

  .incollect{
    font-weight: bolder;
    color: #666;
    font-size: 14px;
  }

</style>